<template>
	<el-dialog title="远程校准" v-model="visible" :close-on-click-modal="false" draggable width="800px">
		<el-form :model="form" ref="dataFormRef" label-width="90px" :rules="dataRules">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="检测因子" prop="monitorFactor">
						<el-select v-model="form.monitorFactor">
							<el-option v-for="item in options" :key="item.id" :label="item.cnName" :value="item.code"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设备名称：">
						<div>{{ equimpentName }}</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-table :data="serieData" class="mt-4">
			<el-table-column label="级(Serie)" prop="Serie" align="center" width="90" />
			<el-table-column label="标气(Gas)" prop="Gas" align="center">
				<template #default="{ row }">
					<div class="flex mb-2">
						<div class="min-w-[60px] w-[60px] text-right">地址:</div>
						<el-inputNumber v-model="row.GasAdd" size="small" :min="0" value-on-clear="min" controls-position="right" />
					</div>
					<div class="flex">
						<div class="min-w-[60px] w-[60px] text-right">值:</div>
						<el-inputNumber v-model="row.Gas" size="small" :precision="3" :step="0.1" value-on-clear="min" controls-position="right" />
					</div>
				</template>
			</el-table-column>
			<el-table-column label="ACK" prop="ACK" align="center">
				<template #default="{ row }">
					<div class="flex mb-2">
						<div class="min-w-[60px] w-[60px] text-right">地址:</div>
						<el-inputNumber v-model="row.ACKAdd" size="small" :min="0" value-on-clear="min" controls-position="right" />
					</div>
					<div class="flex">
						<div class="min-w-[60px] w-[60px] text-right">值:</div>
						<el-inputNumber v-model="row.ACK" size="small" :precision="3" :step="0.1" value-on-clear="min" controls-position="right" />
					</div>
				</template>
			</el-table-column>
			<el-table-column label="标定(Calibration)" width="220" align="center">
				<template #default="{ row }">
					<el-button type="success" @click="handleConfirm(row, 'Gas')" size="small">确定(Gas)</el-button>
					<el-button type="primary" @click="handleConfirm(row, 'ACK')" size="small">确定(ACK)</el-button>
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<!-- <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button> -->
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { useMessage } from '/@/hooks/message';
import { config } from '/@/api/platform/airMonitorEquipment';
import { fetchFactorDetailList } from '/@/api/platform/dataTemplate';
import { validateNull } from '/@/utils/validate';
interface OptionType {
	id: string;
	code: string;
	cnName: string;
}
type serieDataType = {
	Serie: string;
	Gas: number | null;
	ACK: number | null;
	GasAdd: number | null;
	ACKAdd: number | null;
};
const options = ref<OptionType[]>([]);
const emit = defineEmits(['refresh']);
const visible = ref(false);
const loading = ref(false);
const dataFormRef = ref();
const equimpentName = ref();
const form = reactive({
	monitorFactor: '',
	equipmentCode: '',
});
const serieData = ref<serieDataType[]>([]);
const getSerieData = () => {
	serieData.value = [];
	for (let i = 0; i < 5; i++) {
		serieData.value.push({ Serie: `0${i + 1}`, Gas: null, ACK: null, GasAdd: null, ACKAdd: null });
	}
};
// 打开弹窗
const openDialog = (equipmentCode: string, dataTemplateId: string, name: string) => {
	visible.value = true;
	form.equipmentCode = '';
	equimpentName.value = name;
	getSerieData();
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
	equipmentCode && (form.equipmentCode = equipmentCode);
	if (dataTemplateId) {
		// 获取检测因子
		fetchFactorDetailList({ id: dataTemplateId }).then((res) => {
			options.value = res.data;
		});
	}
};
const dataRules = ref({
	monitorFactor: [{ required: true, message: '请选择', trigger: 'change' }],
	registerStartAddress: [{ required: true, message: '请输入', trigger: 'blur' }],
	calibratingValue: [{ required: true, message: '请输入', trigger: 'blur' }],
});
const handleConfirm = async (row: serieDataType, type: string) => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	const registerStartAddress = type === 'Gas' ? row.GasAdd : row.ACKAdd;
	const calibratingValue = type === 'Gas' ? row.Gas : row.ACK;
	if (validateNull(registerStartAddress) || validateNull(calibratingValue)) {
		useMessage().wraning('请先输入设定值或地址！');
		return false;
	}
	try {
		loading.value = true;
		const configContent = form.monitorFactor + ';' + registerStartAddress + ';' + calibratingValue;
		const protocolDateStr = { equipmentCode: form.equipmentCode, configType: '2003', configContent: configContent };
		await config(protocolDateStr);
		useMessage().success('修改成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped></style>
